<template>
  <div class="van-select-field">
    <van-field :label="label"
               :placeholder="placeholder"
               :disabled="disabled"
               v-model="text"
               @click.native="open">
      <van-icon name="arrow"
                slot="icon" />
    </van-field>
    <div class="dialog"
         v-show="box">
      <van-nav-bar class="header"
                   left-arrow
                   :title="label"
                   @click-left="close">
      </van-nav-bar>
      <div class="weaper"
           v-show="!listFlag">
        <van-cell-group>
          <van-cell :title="item[labelKey]"
                    v-for="(item,index) in dataList"
                    :key="index"
                    :class="{'is-active':item[valueKey]===val,'is-disabled':dicDisabled.includes(index)}"
                    @click.native="dicDisabled.includes(index)?'':setItem(item)" />
        </van-cell-group>
      </div>
    </div>
    <div class="tip"
         v-show="listFlag">{{errorValue}}</div>
  </div>
</template>

<script>
import { getDic } from '@/api/common';
import { validatenull } from '@/util/validate';

export default {
  props: {
    value: {
      type: String,
    },
    label: {
      type: String,
    },
    list: {
      type: Array,
      default: () => [],
    },
    placeholder: {
      type: String,
    },
    errorText: {
      type: String,
    },
    dicName: {
      type: String,
    },
    dicDisabled: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    props: {
      type: Object,
      default() {
        return {
          label: 'label',
          value: 'value',
        };
      },
    },
  },
  computed: {
    listFlag() {
      if (this.dataList.length == 0 && this.box) {
        return true;
      }
      return false;
    },
    labelKey() {
      return this.props.label || 'label';
    },
    valueKey() {
      return this.props.value || 'value';
    },
    errorValue() {
      return this.errorText || '没有发现相关数据';
    },
  },
  data() {
    return {
      val: '',
      text: '',
      box: false,
      dataList: [],
    };
  },
  created() {
    if (!validatenull(this.dicName)) this.getDic();
  },
  watch: {
    value(val) {
      this.setVal(val);
    },
    list(val) {
      this.dataList = val;
    },
  },
  methods: {
    getDic() {
      getDic(this.dicName).then((res) => {
        const data = res.data;
        this.dataList = data;
      });
    },
    setVal(val) {
      this.val = val;
      const obj = this.getItem(this.val);
      this.text = obj ? obj[this.labelKey] : '';
      this.$emit('input', this.val);
      this.$emit('change', this.val);
    },
    setItem(item) {
      this.setVal(item[this.valueKey]);
    },
    getItem(val) {
      let obj;
      this.dataList.forEach((ele) => {
        if (ele[this.valueKey] == val) {
          obj = ele;
        }
      });
      this.close();
      return obj;
    },
    close() {
      this.box = false;
    },
    open() {
      if (this.disabled) return;
      this.box = true;
    },
  },
};
</script>

<style lang="scss">
.van-select-field {
  .dialog {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #efeff4;
    z-index: 2001;
  }
  .tip {
    position: fixed;
    top: 300px;
    width: 100%;
    text-align: center;
    z-index: 99999;
    color: #999;
    font-size: 16px;
  }
}
</style>
